<!--
 * @Description: 表单预览
 * @Author: wangwangwang
 * @Date: 2020-07-17 10:48:53
 * @LastEditors: wangwangwang
 * @LastEditTime: 2020-12-16 16:49:12
--> 
<template>
  <section>
    <div v-for="item in previewData" :key="item.id" class="from-row">
      <el-row>
        <template v-for="(list,index) in item.children">
          <el-col v-if="!list.isEmpty" :key="index" :style="{width:`${(list.width/defaultColNum)*100}%`}">
            <el-form>
              <template v-for="(list2, index2) in list.children">
                <el-form-item v-if="list2.type===10" :key="index2">
                  <div class="flows-title">{{list2.title}}</div>
                </el-form-item>
                <el-form-item v-if="list2.type&&list2.type!==10" :key="index2" :label-width="`${list2.titleWidth/(list2.titleWidth*1+list2.contentWidth*1)*100}%`" :label="list2.title">
                  <el-input v-if="list2.type===1||list2.type===2||list2.type===8" v-model="item.value" resize='none' type="textarea" :rows="list2.rowHeight"></el-input>
                  <div v-if="list2.type===3">
                    <el-radio label="1">选项1</el-radio>
                    <el-radio label="2">选项2</el-radio>
                  </div>
                  <div v-if="list2.type===4">
                    <el-checkbox label="1">选项1</el-checkbox>
                    <el-checkbox label="2">选项2</el-checkbox>
                  </div>
                  <el-select v-if="list2.type===5" v-model="item.value" style="width:100%;" multiple placeholder="请选择">
                    <el-option label="选项1" value="1" />
                    <el-option label="选项2" value="2" />
                  </el-select>
                  <el-date-picker v-if="list2.type===6" v-model="item.value" style="width:100%;" type="date" placeholder="选择日期">
                  </el-date-picker>
                  <div v-if="list2.type===7">
                    <el-button style="margin-left:0;" class="bottom_all" type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
                  </div>
                </el-form-item>
              </template>
            </el-form>
          </el-col>
        </template>
      </el-row>
    </div>
  </section>
</template>
<script>
export default {
  props: ['previewData', 'defaultColNum'],
  data() {
    return {
      value: '',
      defaultHeight: 33,
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
.flows-title{
  width: 100%;
  text-align: center;
  font-size: 22px;
  color: #000;
}
</style>

